<template>
	<view class="choosePark">
		<u-navbar
			title="选择园区"
			:border-bottom="false"  
		>
<!-- 			<view class="navbar__search" >
				<u-icon name="search" color="#000000" :size="28"></u-icon>
				<u-input placeholder="搜索园区" class="navbar__search__text"/>
			</view> -->
<!-- 			<view class="navbar__submit" slot="right" @click="search">搜索</view> -->
		</u-navbar>
		<view class="choosePark__box">
			<view class="choosePark__box__title" @click="choosePark(index)">当前选择园区</view>
			<view class="choosePark__box__list" v-if="$store.state.currentPark">{{$store.state.currentPark.parkName}}</view>
			<view v-else class="choosePark__box__list--msg">暂不属于任何园区</view>
		</view>
		<view class="choosePark__box">
			<view class="choosePark__box__title" @click="choosePark(index)">我的园区</view>
			<view class="choosePark__box__list" v-if="$store.state.userInfo.parkId">{{$store.state.userInfo.parkId}}</view>
			<view v-else class="choosePark__box__list--msg">暂不属于任何园区</view>
		</view>
		
		<view class="choosePark__box">
			<view class="choosePark__box__title">园区列表</view>
			<view v-for="(park,index) in parkList" @click="choosePark(park)">
				<view class="choosePark__box__list">{{park.parkName}}</view>
			</view>
			<u-loadmore :status="loadMoreStatus" />
		</view>
	
		
<!-- 	<u-index-list :scrollTop="scrollTop" :index-list="indexList" >
		<view v-for="(item, index) in list" :key="index">
			<u-index-anchor :index="item.letter" />
			<view @click="changePark(item1.name)" class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index">
				{{item1.name}}
			</view>
		</view>
	</u-index-list> -->
	</view>
</template>

<script>
	import store from './store.js'

	export default {
		data() {
			return {
				store:store,
				scrollTop: 0,
				page:1,
				parkList:[],
				loadMoreStatus:'nomore',
				
			}
		},
		onReachBottom() {
			// let _this=this;
			// this.page++;
			// let queryData={
			// 	pageSize:30,
			// 	pageNum:this.page,
			// }
			// this.$Axios({
			// 	method:"post",
			// 	url:_this.$store.state.baseURL+"/park/query",
			// 	data:queryData
			// }).then((response) => {
			// 	console.log("code",response)
			// 	if(response.data.code=="200"){
			// 		_this.parkList=response.data.msg
					
			// 	}else{
			// 		uni.showToast({
			// 			title:response.data.msg,
			// 			duration:2000,
			// 			icon:"none"
			// 		})
			// 	}
			// }).catch(error=>{
			// 	console.log("erroe",error)
			// })
			// console.log("parkList",this.parkList)
		},
		mounted(){
			let _this=this;
			console.log("mounted")
			this.$Axios({
				method:"get",
				url:_this.$store.state.baseURL+"/park/all"	}).then((response) => {
				console.log("code",response)
				if(response.data.code=="200"){
					_this.parkList=response.data.msg
					
				}else{
					uni.showToast({
						title:response.data.msg,
						duration:2000,
						icon:"none"
					})
				}
			}).catch(error=>{
				console.log("erroe",error)
			})
			console.log("parkList",this.parkList)
		},
		methods:{
			choosePark(park){
				this.$store.state.currentPark=park
				uni.$emit("parkChange",{
					parkId:park.id
				})
				
				uni.navigateBack({
					delta:1,
					animationType:"pop-out",
					animationDuration:200,
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.choosePark{
	display: flex;
	flex-direction: column;
	background-color: @uni-bg-color-grey;
	height: calc(100vh);
	&__box{
		display: flex;
		flex-direction: column;
		&__title{
			font-size: @uni-font-size-lg;
			margin: @uni-spacing-row-base @uni-spacing-col-lg;
			
		}
		&__list{
			display: flex;
			padding: @uni-spacing-row-lg @uni-spacing-col-lg;
			background-color: #fff;
			border-bottom: @line-light-size solid @uni-border-color;
			&--msg{
				margin: @uni-spacing-row-base @uni-spacing-col-lg;
				color: @font-color-grey;
				font-size: @uni-font-size-sm;
			}
		}
		&__list:hover{
			background-color: @uni-bg-color-hover;
		}
		
	}
}
	.list-cell {

	}
	.list-cell:hover {
		background-color: #e5e7ea;
	}
</style>
